<template>
    <div class="module-page" v-loading="loading">
        <el-form ref="ruleForm" label-width="90px" class="demo-ruleForm">
            <el-form-item label="模板名称：" prop="modelName">
                <h4>{{ templateInfo.modelName }}</h4>
            </el-form-item>
            <el-form-item label="网络选择：" prop="network">
                <p>{{ getNetwork(templateInfo.network).label }}</p>
            </el-form-item>
            <el-form-item label="设备分类：" prop="deviceType">
                <span>{{ deviceTypeMap && deviceTypeMap[templateInfo && templateInfo.deviceType] }}</span>
                <span> / </span>
                <span>{{ deviceTypeMap && deviceTypeMap[templateInfo && templateInfo.deviceTypeTwo] }}</span>
<!--                <p>{{ deviceTypeMap }}</p>-->
<!--                <p>-{{ templateInfo.deviceType }}</p>-->
            </el-form-item>
            <el-form-item label="设备指标：" prop="paramName">
                <el-tag v-for="item in templateInfo.paramName.filter(item => item.isSelect)" style="margin-right: 10px" size="small" :key="item.id" type="success">{{ item.paramName }}</el-tag>
            </el-form-item>
            <el-form-item label="创建时间：" prop="description">
                <p>{{ moment(templateInfo.createTime).format('YYYY-MM-DD HH:mm:ss') }}</p>
            </el-form-item>
            <el-form-item label="模板描述：" prop="description">
                <p>{{ templateInfo.description || '-' }}</p>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { getNetwork } from '@/assets/dict'
import moment from 'moment'
import { mapState } from 'vuex'

export default {
  name: 'tempInfo',
  props: {
    templateInfo: {
      type: Object,
      default: () => {
        return {
          modelName: '',
          deviceType: '',
          createTime: '',
          description: '',
          paramName: []
        }
      }
    }
  },
  data() {
    return {
      loading: false,
      tempId: '',
      getNetwork,
      moment
    }
  },
  computed: {
    ...mapState('dict', ['deviceTypeMap']),
  },
  methods: {
  },
  mounted() {
    this.tempId = this.$route.query.tempId
    if (this.tempId) {
      this.queryInfo()
    }
  },
}
</script>

<style lang="scss" scoped>
    .module-page {
        padding: 27px;
        width: 800px;
        box-sizing: border-box;
    }
</style>